<template>
  <div>
    <h1 id="EndpointsView">Hello!{{ user }}.Welcome to My World!</h1>
    <div id="double-binding">
      <p>{{ message }}</p>
      <input v-model="message"/>
      <p>Using mustaches : {{ rawHtml }}</p>
      <p>using v-html directive : <span v-html="rawHtml"></span></p>
    </div>
    <div :id="test1id">
      <p>{{ test1id }}</p>
    </div>
    <button :disable="isButtonDisabled" @click="changeMsg()">按钮</button>
  </div>
</template>

<script>
export default {
  name: 'EndpointsView',
  data () {
    return {
      user: 'gxx',
      message: 'cool',
      rawHtml: '<span style="color: red">1233</span>',
      test1id: 'test1',
      isButtonDisabled: false
    }
  },
  methods: {
    // test
    changeMsg (e) {
      alert('hello')
    },
    // handler
    handleSubmit (e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log('Received values of form: ', values)
        }
      })
    }
  }
}
</script>

<style>
#test1
{
    color: blue;
}
</style>
